<template>
  <div>

    <h3>倾听器使用</h3>
    <h3>示例一、字符串监听</h3>
    <span>商品名字：{{name}}</span>

    <el-button @click="clickWatch()" type="primary">监听</el-button>

    <h3>示例二 、数字监听</h3>
    <span>商品数量：{{count}}</span>
    <el-button @click="clickWatch()" type="primary">监听</el-button>

    <h3>示例三 、数组监听</h3>
    <span>商品种类：{{list}}</span>
    <el-button @click="clickWatch()" type="primary">监听</el-button>

    <h3>示例四 、监听对象属性变化</h3>
    <span>商品名：{{form.name}}</span>
    <el-button @click="clickWatchForm()" type="primary">监听</el-button>

  </div>
</template>

<script>
export default {
  data () {
    return {

      name: "asen",
      count: 10,
      list: [],

      form: {
        name: 'asen',
        age: 10,
      }
    }
  },

  watch: {
    name: {
      handler (newVal, oldVal) {
        console.log(242424242)
      },

      immediate: true

    },

    count: function () {
      console.log(22222222)
    },

    list () {
      console.log(6666666)
    },

    // 'form.name': function (newValue, old) {
    //   console.log(newValue)
    //   console.log(old)

    // },

    form: {
      handler (newVal, oldVal) {
        console.log(newVal)
        console.log(oldVal)
      },
      deep: true
    }




  },

  methods: {

    clickWatch () {
      this.name = this.name + "a"
      this.count = this.count + 1
      this.list.push("1234")
    },

    clickWatchForm () {
      this.form.name = this.form.name + "ba"
    }
  }

}
</script>

<style scoped>
</style>